<template>
  <div :class="['query-card-con', layoutConfig.boxShadow===true&&'show-box-shadow'].join(' ')">
    <div :class="['default-query-con', layoutConfig.defaultQueryBorderBottom===true&& 'show-border-bottom'].join(' ')">
      <div class="query-con">
        <PageForm ref="defaultForm" :id="formKey_defaultForm_"
          :formKey="formKey_defaultForm_"
          :formEvent="(...args)=>{formEvent('defaultForm',...args)}"
          :formConfig="pageFormDefaultConfig"
          :itemList="formList.defaultForm"></PageForm>
      </div>
      <div class="query-btn-con">
        <a-button type="primary" @click="queryEvent_('query',{isEvent:true})"><a-icon type="search" />查询</a-button>
        <a-button class="spacing-x" @click="queryEvent_('clear',{isEvent:true})"><a-icon type="reload" />重置</a-button>

        <a-button :key="'btn-default-'+index" v-for="(item,index) in btnGroup.defaultBtn" v-bind="item.itemAttr" class="spacing-x" @click="queryEvent_(item.eventKey,item)">{{item.label}}</a-button>

        <a-button type="link" @click="showPanel" v-if="btnGroup.btnList.length>0 || formList.formLis.length>0">更多<a-icon class="tb" type="down" /></a-button>
      </div>
    </div>
    <div class="panel-query-con">
      <div class="query">
        <PageForm ref="queryForm" :id="formKey_queryForm_" :formKey="formKey_queryForm_" :formEvent="(...args)=>{formEvent('queryForm',...args)}" :formConfig="pageFormConfig" :itemList="formList.formLis"></PageForm>
      </div>
      <div class="btn-group-list" v-if="btnGroup.btnList.length>0">
        <a-button :key="'btn-list-'+index" v-for="(item,index) in btnGroup.btnList" v-bind="item.itemAttr" class="spacing-x" @click="queryEvent_(item.eventKey,item)">{{item.label}}</a-button>
      </div>
    </div>
    <div class="panel-query-show-con">
      <div class="btn-group-list" v-if="btnGroup.showBtnList.length>0">
        <a-button :key="'btn-list-'+index" v-for="(item,index) in btnGroup.showBtnList" v-bind="item.itemAttr" class="spacing-x" @click="queryEvent_(item.eventKey,item)">{{item.label}}</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import anime from 'animejs'
import PageForm from './PageForm.vue'
import UUID from './../../utils/uuid'
const formKey_queryForm =  UUID()
const formKey_defaultForm =  UUID()

const pageFormConfig_ = {
  columnCount:4,
  layout:'horizontal',
  labelCol:{span: 6},
  wrapperCol:{span: 18},
  rowAttr:{
    //  type:'',justify:'',gutter:'',align:''
    },
  celAttr:{
    // flex,offset,order,pull,push,span,xxl...
  }

}
export default {
  name:'QueryCard',
  props:{
    // isDefault 表示是否在默认位置显示  默认位置在【重置】和【更多之间】
    // label 按钮中文名称
    // isEvent 是否启用按钮事件  默认为true 表示启用按钮click事件
    // eventKey  用于触发事件的标识
    /*{
      btnGroupConfig:{
        btnList:[{isDefault:true, label:'', eventKey:'', isEvent:true}],
      },
      formListConfig:{
        // 表示条件下拉的每行显示的条件个数
        columnCount:4,
        // isDefault 表示要在默认位置显示的查询条件
        formList:[{ isDefault:true, enName:'userName10',cnName:'电子邮箱11',type:'input',value:''},{ enName:'userName30',cnName:'电子邮箱3',type:'input',value:''},]
      },
    }
    */
    config:{type:Object,default:()=>null},
    // queryEvent(type,formData) // type 表示触发此事件的按钮 eventKey 值    formData 表示当前查询组件所有添加的值对象
    queryEvent:{type:Function}
  },
  components:{PageForm},
  data(){
    return {
      formKey_queryForm_:formKey_queryForm,
      formKey_defaultForm_:formKey_defaultForm,
      animeSwitch:true,
      pageFormConfig:pageFormConfig_,
      pageFormDefaultConfig:pageFormConfig_,
      btnGroup:{
        defaultBtn:[
          // {isDefault:true, label:'', eventKey:'updateFile', isEvent:true, itemAttr:{shape:"circle", type:'primary', icon:"search"}},
          // {isDefault:true, label:'下载', eventKey:'downloadFile',isEvent:true, itemAttr:{}},
        ],
        btnList:[
          // { label:'下载', eventKey:'downloadFile1',isEvent:true, itemAttr:{}},
          // { label:'下载', eventKey:'downloadFile2',isEvent:true, itemAttr:{}},
          // { label:'下载', eventKey:'downloadFile3',isEvent:true, itemAttr:{}},
          // { label:'下载', eventKey:'downloadFile4',isEvent:true, itemAttr:{}},
          // { label:'下载', eventKey:'downloadFile5',isEvent:true, itemAttr:{}},
          // { label:'下载', eventKey:'downloadFile6',isEvent:true, itemAttr:{}},
          // { label:'下载', eventKey:'downloadFile7',isEvent:true, itemAttr:{}},
          // { label:'下载', eventKey:'downloadFile8',isEvent:true, itemAttr:{}},
        ],
        // 用于创建一直显示的按钮  isAlwaysShow 控制是否一直显示
        showBtnList:[
          // { isDefault:false, isAlwaysShow:true, label:'下载', eventKey:'downloadFile1',isEvent:true, itemAttr:{}},
          // { isDefault:false, isAlwaysShow:true, label:'下载', eventKey:'downloadFile2',isEvent:true, itemAttr:{}},
        ]
      },
      formList:{
        defaultForm:[
          // { enName:'userName10',cnName:'电子邮箱11',type:'input',value:'',formItemAttr:{ labelCol:{span: 10}, wrapperCol:{span: 12}}},
          // { enName:'userName20',cnName:'电子邮箱2',type:'input',value:'',itemAttr:{addonAfter:'@@'},formItemAttr:{ labelCol:{span: 10}, wrapperCol:{span: 12}}},
          // { enName:'userName30',cnName:'电子邮箱3',type:'input',value:'',formItemAttr:{ labelCol:{span: 10}, wrapperCol:{span: 12}}},
          // { enName:'userName40',cnName:'电子邮箱4',type:'input',value:'',formItemAttr:{ labelCol:{span: 10}, wrapperCol:{span: 12}}},
        ],
        formLis:[
          // { enName:'userName11',cnName:'电子邮箱1',type:'input',value:''},
          // { enName:'userName22',cnName:'电子邮箱2',type:'input',value:''},
          // { enName:'userName33',cnName:'电子邮箱3',type:'input',value:''},
          // { enName:'userName14',cnName:'电子邮箱1',type:'input',value:''},
          // { enName:'userName25',cnName:'电子邮箱2',type:'input',value:''},
          // { enName:'userName36',cnName:'电子邮箱3',type:'input',value:''},
          // { enName:'userName17',cnName:'电子邮箱1',type:'input',value:''},
          // { enName:'userName28',cnName:'电子邮箱2',type:'input',value:''},
          // { enName:'userName39',cnName:'电子邮箱3',type:'input',value:''},
          // { enName:'userName110',cnName:'电子邮箱1',type:'input',value:''},
          // { enName:'userName211',cnName:'电子邮箱2',type:'input',value:''},
          // { enName:'userName312',cnName:'电子邮箱3',type:'input',value:''},
        ],
      },
      formsDataList:{},
      layoutConfig:{
        // 查询框的外部阴影  show-box-shadow
        boxShadow:false,
        // 是否显示默认条件下的下边框线  show-border-bottom
        defaultQueryBorderBottom:false,
      }
    }
  },
  watch: {
    config: {
      handler(val) {
        if(Object.prototype.toString.call(val) ==='[object Object]'){
          const {btnGroupConfig,formListConfig,layoutConfig,pageFormConfig} = val
          const btnCon = this.getDefaultData(btnGroupConfig.btnList)
          const formCon = this.getDefaultData(formListConfig.formList)
          this.getLayoutConfig(layoutConfig)
          this.setBtnGroup(btnCon)
          this.setFormList(formCon)
          console.log('pageFormConfig=======>',val,pageFormConfig, this);
          this.setDefaultFormConfig(formCon.defaultDataList.length,pageFormConfig.defaultFormConfig)
          this.setFormConfig(formListConfig.columnCount || formCon.dataList.length,pageFormConfig.formConfig)
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    getDefaultData(dataList_=[]){
      const defaultDataList=[]
      const dataList=[]
      dataList_.forEach(element => {
        if(element.isDefault && element.isDefault=== true){
          defaultDataList.push(element)
        }else{
          dataList.push(element)
        }
      });
      // console.log('getDefaultData===>',defaultDataList,dataList);
      return {defaultDataList,dataList}
    },
    setBtnGroup(dataOption){
      const {defaultDataList,dataList} = dataOption
      const defaultData = this.getAlwaysShowBtn(defaultDataList)
      const data = this.getAlwaysShowBtn(dataList)
      this.btnGroup.defaultBtn = defaultData.notAlwaysShowList
      this.btnGroup.btnList = data.notAlwaysShowList
      this.btnGroup.showBtnList = [...defaultData.alwaysShowList,...data.alwaysShowList]

    },
    getAlwaysShowBtn(btnListArr){
      const res1 = []
      const res2 = []
      btnListArr.forEach(item=>{
        const {isAlwaysShow} = item
        if(isAlwaysShow&& isAlwaysShow===true){
          res1.push(item)
        }else{
          res2.push(item)
        }
      })
      return {alwaysShowList:res1,notAlwaysShowList:res2}
    },
    setFormList(dataOption){
      const {defaultDataList,dataList} = dataOption
      this.formList.defaultForm = defaultDataList
      this.formList.formLis = dataList
    },
    setDefaultFormConfig(dataSize,formConfig){
      const tempConfig = this.getPageFormConfig(dataSize,formConfig)
      console.log('setDefaultFormConfig===>',tempConfig,formConfig,this.config.pageFormConfig.defaultFormConfig);
      this.pageFormDefaultConfig = tempConfig
    },
    setFormConfig(dataSize,formConfig){
      const tempConfig = this.getPageFormConfig(dataSize,formConfig)
      this.pageFormConfig = tempConfig
    },
    queryEvent_(type,item){
      if(type === 'query'){
        this.getQueryData()
      }
      if(type ==='clear'){
        this.clearQueryData()
      }
      if(Object.prototype.toString.call(this.queryEvent)==='[object Function]'){
        item&&item.isEvent&& item.isEvent===true &&  this.queryEvent(type,this.formsDataList)
      }
    },
    clearValue(value){
      const typeList = {
        "[object String]":()=>{ return ''},
        "[object Array]":()=>{ return []},
        "[object Boolean]":()=>{ return false},
        "[object Number]":()=>{ return 0},
      }
      const valueType = Object.prototype.toString.call(value)
      return typeList[valueType]&&typeList[valueType]() || typeList["[object String]"]()
    },
    clearQueryData(){
      this.formList.formLis.forEach(item =>{
        this.$refs.queryForm.setFieldValue({[item.enName]:this.clearValue(item.value)})
      })
      this.formList.defaultForm.forEach(item =>{
        this.$refs.defaultForm.setFieldValue({[item.enName]:this.clearValue(item.value)})
      })
    },
    getQueryData(){
      this.$refs['defaultForm'].handleSubmit()
      this.$refs.queryForm.handleSubmit()
      // console.log(this.formsDataList);
      // console.log(this.$refs['defaultForm']);
    },
    getPageFormConfig(columnCount=3,formConfig){
      const tempConfig = Object.assign({},JSON.parse(JSON.stringify(pageFormConfig_)),formConfig)
      // tempConfig.columnCount = formConfig.columnCount
      // tempConfig.layout = layout
      // tempConfig.labelCol = labelCol
      // tempConfig.wrapperCol = wrapperCol
      // tempConfig.rowAttr = rowAttr
      // tempConfig.celAttr = celAttr
      // console.log('getPageFormConfig==============>',tempConfig);
      // pageFormDefaultConfig
      return tempConfig
    },

    formEvent(formName,type,data){
      const tempObj = JSON.parse(JSON.stringify(this.formsDataList))
      this.formsDataList = {...tempObj,...data.values}
      // console.log('index formEvent===>',this.formsDataList, formName,type,data);
      // this.$attrs.itemData.value = data
      if(Object.prototype.toString.call(this.queryEvent)==='[object Function]'){
        this.queryEvent(type,this.formsDataList)
      }
    },
    showPanel(){
      let height_ = '0px'
      let rotate_ = 0
      // rowInfo
      const rowSize =this.$refs.queryForm.rowInfo.length
      const btnSize = this.btnGroup.btnList.length
      const tempHeight = rowSize * 65 + 20 + (btnSize>0 ? 54 : 0)
      // 54

      if(this.animeSwitch){
        height_ = tempHeight+'px'// '180px'
        rotate_ = 180
      }
      if(!this.animeSwitch){
        height_ = '0px'
        rotate_ = 0
      }

      anime({
        targets: '.panel-query-con',
        height: height_,
        duration: 400,
        // backgroundColor: '#A4FF4F',
        easing: 'easeInOutQuad'
      });
      anime({
        targets: '.tb',
        rotate: {
          value: rotate_,
          duration: 400,
          easing: 'easeInOutSine'
        }
      });

      this.animeSwitch = !this.animeSwitch
    },
    getUUID(){
      const ll =  UUID()
      // console.log('UUID==>',ll);
      return ll
    },
    getLayoutConfig(config_){

      this.layoutConfig = config_ || {
        // 查询框的外部阴影  show-box-shadow
        boxShadow:false,
        // 是否显示默认条件下的下边框线  show-border-bottom
        defaultQueryBorderBottom:false,
      }
    }
  }
}
</script>

<style lang="less">
.query-card-con{
  width: 100%;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  flex-direction: column;
  margin: 10px 0;
  &.show-box-shadow{
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }
  .default-query-con{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    &.show-border-bottom{
      border-bottom: 1px solid #ccc;

    }
    .query-con{
      flex: 1;
      height: 100%;
      padding: 0 10px;
    }
    .query-btn-con{
      height: 100%;
      display: flex;
      padding-top: 5px;
    }
  }
  .panel-query-con{
    width: 100%;
    // margin: 10px;
    height: 0px;

    display: flex;
    justify-content:flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    .query{
      // flex: 1;
      width: 100%;
      // height: 100%;
      padding: 10px;
      overflow: auto;
      // margin-bottom: 52px;
    }
    .btn-group-list{
      // position:absolute;
      // bottom: 5px;
      // height: 50px;
      padding: 10px;
      width: 100%;
      display: flex;
      justify-content:flex-start;
      align-items: center;
      border-top: 1px solid #ccc;
      // box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
    }
  }
  // 一直显示的面板
  .panel-query-show-con{
    width: 100%;
    display: flex;
    justify-content:flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    .btn-group-list{
      // position:absolute;
      // bottom: 5px;
      // height: 50px;
      padding: 10px;
      width: 100%;
      display: flex;
      justify-content:flex-start;
      align-items: center;
      // border-top: 1px solid #ccc;
      // box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
    }
  }
  .spacing-x{
    margin: 0 5px;
  }
  .spacing-y{
    margin: 5px 0;
  }
}
</style>
<!-- https://www.animejs.cn/start/ -->
